<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<link rel="stylesheet" href="gadgets.css" type="text/css" />

<title>Heatmap</title>
</head>

<body>


<h1 class="title">Liquid Diagrams</h1>

<p class="title">
&copy;2009 Martin Lessacher<br/>
</p>


<h2 class="title">Heatmap</h2>
<p>A heatmap is a representation of data in two-dimensional areas. Each data entity is assigned a colour corresponding to its value. The history of heatmaps can be traced back to Toussaint Loua who introduced colour shaded matrix display in 1873. A typical type of a heatmap is a cluster heatmap. A cluster heatmap consists of a rectangular tiling with each tile shaded on a colour scale. Heat maps typically find application in web page analysis and in molecular biology.</p>

<p>A choropleth map is a heatmap with cartographic areas. Choropleth maps display geographic areas which are shaded to reflect a value assigned to this specific area. By doing so the choropleth maps are designed to enhance the analysis of all kinds of geographical data like economical and statistical facts of countries.  The first choropleth map was introduced in 1826 by Charles Dupin and displayed the distribution and intensity of illiteracy in France. Choropleth maps have been growing more popular the past years.</p>

<br />
	<a href="images/heatmap.png"><img class="center" src="images/heatmap.png" alt="The Liquid Diagrams bar chart visualisation." width="650" height="350"/></a>
<br />
<br/>

<h2 class="title">Features</h2>
<b>SVG Maps</b><br/>
<p>The drawn regions are completely based on scalable vector graphics, the complete content is resizable. If desired, the content can be scaled to be displayed in the whole available space. Upto now, 13 maps including a world map, all six continents, and a few European countries are available.</p><br/>

<b>Colours</b><br/>
<p>The attribute which is mapped to colour can easily be changed interactively by selecting another attribute frome those supplied with the data set from the colour combo box. Each attribute is assigned a predefined colour value. It is also possible to change the assigned colour, by simply clicking on one of the colour bins in the legend, which opens a colour chooser to pick a new colour.
The colour distribution among the entities is also changeable by clicking on the appropriate distribution button in the legend.</p><br />

<b>Selective Content</b><br/>
<p>There is an option to only draw specific regions of those contained in a map. For example, if users want to visualise only the Benelux countries using the Europe map, they can do this by providing data only for the Benelux countries and turning on the appropriate option in the Options Panel.</p><br/>

<b>Zooming</b><br/>
<p>Depending on the input data, the heatmap visualisation automatically chooses an appropriate map (common region) to display all the country and region codes present in the data file. If the data and an appropriate map for a country is present, this country can be clicked on the common map to zoom to it. Thus the data of the chosen region is shown on the specific detail map. For example, if data values of Austrian and French provinces are given, the Europe map will be used to initially display all the values. By clicking on Austria, a switch to the Austria map occurs, displaying the data supplied for the Austrian provinces.</p><br />

<b>Interaction</b><br/>
<p>When exploring the visualisation, detailed tooltips composed from the provided data sets are displayed using mouse-over effects to enhance the understanding of the displayed content. Also, zooming effects are accessible using mouse clicks.</p><br />

<b>Changing fonts</b><br/>
<p>All the fonts used in the visualisations can be replaced by other fonts. To do this the user has to switch
to the "Font" panel in the options and choose a font colour, size and type for the desired font 
category. When using the corresponding buttons it is possible to set the font style to bold, italic and 
underline. The selected fonts are loaded on runtime into the gadget.</p><br/>

<b>Changing diagram titles</b><br/>
<p>The user can dynamically alter the diagram title, the x-axis title, and the y-axis tile by clicking on
the appropriate label. A text box will then appear to enter the new title. The edit process is finished
by confirming the changes with the enter key.</p><br/>

<b>Transpose the data</b><br/>
<p>All Liquid Diagrams Gadgets offer a function to transpose data. This is especially useful if the
data is in the wrong format and it would take several minutes to transpose it by using other applications.
For example Google Docs the only external data source currently available does not
have a function to transpose the data. The transpose option is available among the gadget settings
(almost at the bottom of the gadget options frame) when adding the gadget to the spreadsheet.</p><br/>

<b>Interactively changing gadget settings</b><br/>
<p>Using Google Docs it is not possible to change the gadget settings without losing all changes that
have been made in the visualisation. That means if changes like filters, swapped axes, hidden
data,... have been made they will be reset when changing the gadget parameters with the default
Google gadget settings. This is due to the fact that a new gadget request is sent by Google and the
visualisation is created once again.</p>

<p>Using the Options Panel the user is able to change the parameters dynamically while
exploring the data. This is done through a separate gadget settings menu displayed to the left side
of the visualisation.</p>
<br/><br/>

<h2 class="title">Data Format</h2>
<p>The data format of this visualisation can be seen in the <a href="dataformats.html#geo">data formats document</a>.</p>
<br /><br />



<h2 class="title">Parameter List</h2>

<table width="1290" border="1">
  <tr>
    <td width="65" align="center">Number</td>
    <td width="225" align="left">Parameter</td>
    <td width="98" align="center">Type</td>
    <td width="163" align="center">Options</td>
    <td width="705" align="left">Description</td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="left">X-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The x-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="left">Y-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The y-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td align="left">Compute Category Values</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">If set to true, supplied parent values (data set) are ignored and instead the parent value is computed by summing up all child note values.</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="left">Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Diagram Title - displayed above the visualisation.</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="left">Number Display Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Defines how numbers are to be displayed within the diagram.</td>
  </tr>  
  <tr>
    <td align="center">6</td>
    <td align="left">Number Input Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Determines the format in which the supplied data is formatted.</td>
  </tr> 
  <tr>
    <td align="center">7</td>
    <td align="left">Drop First Line</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines if the first data line is to be dropped. This is the case if the first line contains header information. This value has to be supplied only when calling the gadget manually using JavaScript(not Google Docs).</td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td align="left">Complex Tooltip</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Turns complex tooltips on or off. Complex tooltips contain all the information about the entity but may eventually take more processing time.</td>
  </tr>
  <tr>
    <td align="center">9</td>
    <td align="left">Number of Bins</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Used to set the maximum number of colour bins displayed in the legend.</td>
  </tr>
  <tr>
    <td align="center">10</td>
    <td align="left">Legend</td>
    <td align="center">String</td>
    <td align="center">No Legend | Horizontal | Vertical</td>
    <td align="left">Determines the legend position.</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="left">Keep Aspect Ratio</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether the SVG map should be scaled to use the available space or not (keep ratio).</td>
  </tr>
  <tr>
    <td align="center">12</td>
    <td align="left">Show Map Background</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Colour the background of the map.</td>
  </tr>
  <tr>
    <td align="center">13</td>
    <td align="left">Draw Complete Map</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show the borders of regions present on the used SVG map but not present in the data set.</td>
  </tr>
  <tr>
    <td align="center">14</td>
    <td align="left">Host URL</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">URL of the gadget.The precompiled font files which can be loaded on runntime have to be stored in "./common/fonts/".</td>
  </tr>
  <tr>
    <td align="center">15</td>
    <td align="left">Show Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the diagram title.</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="left">Use Ratio</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether to use a custom display ratio or not. If yes, x-ratio and y-ratio need to be supplied also.</td>
  </tr>
  <tr>
    <td align="center">17</td>
    <td align="left">X-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Width ratio factor.</td>
  </tr>
  <tr>
    <td align="center">18</td>
    <td align="left">Y-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Height ratio factor.</td>
  </tr>
   <tr>
    <td align="center">19</td>
    <td align="left">Show Labels</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show labels displaying the regions data value in the center of each region.</td>
  </tr> 
  <tr>
    <td align="center">20</td>
    <td align="left">Border Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Line size used to draw the borders of the regions.</td>
  </tr> 
</table>
<br/> <br/>

<h2 class="title">Available Maps</h2>
<table width="800" border="1">
  <tr>
    <td width="200" align="left">World</td>
    <td width="200" align="left">Continents</td>
    <td width="200" align="left">Countries</td>
    <td width="200" align="left">Provinces</td>
  </tr>
  <tr>
    <td align="left">World</td>
    <td align="left">Africa</td>
    <td align="left">Austria</td>
    <td align="left">(AT) Burgenland</td>
  </tr>
  </tr>
    <tr>
    <td align="left"></td>
    <td align="left">Asia</td>
    <td align="left">Belgium</td>
    <td align="left">(AT) Carinthia</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left">Europe</td>
    <td align="left">France</td>
    <td align="left">(AT) Lower Austria</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left">Latin America</td>
    <td align="left">Germany</td>
    <td align="left">(AT) Upper Austria</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left">North America</td>
    <td align="left">Switzerland</td>
    <td align="left">(AT) Salzburg</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left">Oceania</td>
    <td align="left">United States</td>
    <td align="left">(AT) Styria</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left"></td>
    <td align="left"></td>
    <td align="left">(AT) Tyrol</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left"></td>
    <td align="left"></td>
    <td align="left">(AT) Vorarlberg</td>
  </tr>
  <tr>
    <td align="left"></td>
    <td align="left"></td>
    <td align="left"></td>
    <td align="left">(AT) Vienna</td>
  </tr>
</table>
<br/><br/>

</body>
</html>
